<template>
  <div>
    <!-- 表头分开写 -->
    <div></div>

    <!-- 表格内容 -->
    <div class="table-container" :style="goodTableFlex">
      <!-- 表头部分 -->
      <div class="table-header">
        <table>
          <thead>
            <tr>
              <!-- 遍历列数组生成表头单元格 -->
              <th
                v-for="(column, columnIndex) in columns"
                :key="columnIndex"
                :style="{ height: '40px', width: column.width }"
              >
                {{ column.label }}
              </th>
            </tr>
          </thead>
        </table>
      </div>

      <div class="table-location">
        <div class="table-wrapper" :style="{ height: computedHeight }">
          <table>
            <tbody>
              <!-- 遍历数据生成表格行 -->
              <tr
                v-for="(row, rowIndex) in displayedData"
                :key="rowIndex"
                :class="{
                  'table-row-selected': row.isSelected,
                  'table-row':!row.isSelected,
                }"
                @mouseover="handleHover(row, rowIndex)"
                @mouseleave="handleMouseLeave(row, rowIndex)"
                @click="handleClick(row, rowIndex)"
                :style="{ height: '32px', pointerEvents: 'auto' }"
              >
                <!-- 序号列 -->
                <td :style="{ width: columns[0].width }">
                  <template>
                    {{ rowIndex + 1 }}
                  </template>
                </td>
                <!-- 遍历列生成数据列 -->
                <td
                  v-for="(column, columnIndex) in columns.slice(1)"
                  :key="columnIndex"
                  :style="{ width: column.width }"
                >
                  <template>
                    {{ row[column.prop] }}
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 展开和收起按钮 -->
        <button
          v-if="data.length > 10 && data.length < 17 && pageLengthnum === 1"
          class="table-retract-button"
          @click="retractTable"
          :style="{
            top: buttonHeightForRetract(data.length),
            pointerEvents: 'auto',
          }"
        ></button>
        <button
          v-if="data.length >= 11 && pageLengthnum === 0"
          class="table-expand-button"
          @click="expandTable"
          :style="{
            // top: buttonHeightList[pageLengthnum],
            pointerEvents: 'auto',
          }"
        ></button>
        <button
          v-if="pageLengthnum === 1 && data.length >= 17"
          class="table-retract-button"
          @click="retractTable"
          :style="{
            // top: buttonHeightList[pageLengthnum],
            pointerEvents: 'auto',
          }"
        ></button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表示是否有行被选中
      isSelected: false,
      // 用于控制页面长度状态的数字
      pageLengthnum: 0,
      // 页面长度列表
      pageLengList: ["32.2vh", "55.3vh"],
      // 按钮高度列表
      buttonHeightList: ["32.2vh", "55.3vh"],
    };
  },
  name: "GoodTable",
  props: {
    data: {
      // 传入的数据数组，类型为数组且必填
      type: Array,
      required: true,
    },
    columns: {
      // 列配置数组，类型为数组且必填
      type: Array,
      required: true,
    },
    height: {
      // 表格高度，默认为'100%'
      type: String,
      default: "100%",
    },
  },
  computed: {
    // 动态生成弹窗样式
    goodTableFlex() {
      return {
        height: this.height,
      };
    },
    displayedData() {
      // 根据不同条件返回要显示的数据
      if (
        this.data.length <= 10 ||
        (this.data.length > 10 &&
          this.data.length < 17 &&
          this.pageLengthnum === 0)
      ) {
        return this.data.slice(0, 10);
      } else if (
        this.data.length > 10 &&
        this.data.length < 17 &&
        this.pageLengthnum === 1
      ) {
        return this.data;
      } else if (this.pageLengthnum === 1 || this.data.length >= 17) {
        return this.data;
      } else {
        return this.data.slice(0, 10);
      }
    },
    computedHeight() {
      // 根据数据长度计算表格高度
      if (this.data.length <= 10) {
        return `${3.22 * this.data.length}vh`;
      } else {
        return this.pageLengList[this.pageLengthnum];
      }
    },
  },
  methods: {
    handleHover(row, rowIndex) {
      // 鼠标悬停时触发，如果没有行被选中，则发射'viewDetailsHover'事件
      if (!this.isSelected) {
        this.$emit("viewDetailsHover", row);
      }
    },
    handleMouseLeave(row, rowIndex) {
      // 鼠标离开时触发，如果没有行被选中，则发射'hoverLeave'事件
      if (!this.isSelected) {
        this.$emit("hoverLeave", row);
      }
    },
    handleClick(clickedRow, rowIndex) {
      // 点击行时的处理逻辑
      // 重置所有行的 isSelected 状态为 false，并使用 this.$set 确保响应式更新
      this.data.forEach((row) => {
        this.$set(row, "isSelected", false); // 使用 $set 保证 Vue 响应式追踪
      });
      this.$set(clickedRow, "isSelected", true); // 更新点击的行为选中状态
      // 发射'viewDetails'事件并更新 isSelected 状态
      this.$emit("viewDetails", clickedRow);
      this.isSelected = true;
    },
    resetSelection() {
      // 重置选中状态的方法
      this.data.forEach((row) => {
        this.$set(row, "isSelected", false); // 确保响应式更新
        this.isSelected = false;
      });
    },

    expandTable() {
      // 展开表格的方法，如果数据长度小于等于 10 则不执行
      if (this.data.length <= 10) {
        return;
      }
      this.pageLengthnum = this.pageLengthnum + 1;
    },
    retractTable() {
      // 收起表格的方法，如果数据长度小于等于 10 则不执行
      if (this.data.length <= 10) {
        return;
      }
      this.pageLengthnum = this.pageLengthnum - 1;
    },
    buttonHeightForExpand(length) {
      // 根据数据长度计算展开按钮的高度
      if (length > 10 && length < 17) {
        return "32.2vh";
      }
      return "55.3vh";
    },
    buttonHeightForRetract(length) {
      // 根据数据长度计算收起按钮的高度
      if (length > 10 && length < 17) {
        const rowHeight = 3.22;
        return length * rowHeight + "vh";
      } else if (length >= 17) {
        const rowHeight = 3.2;
        return 7 * rowHeight + "vh";
      }
      return "32.2vh";
    },
  },
};
</script>

<style scoped>
/* 表头样式 */
.table-header {
  position: sticky;
  top: 0;
  background-color: transparent;
  z-index: 10;
  background-size: 100% 100%;
  /* 固定在顶部，透明背景，有较高的堆叠顺序，背景图片铺满整个区域 */
}

/* 外层容器，使用 flex 布局 */
.table-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  pointer-events: none;
  /* 绝对定位，弹性布局，高度宽度占满，禁用指针事件 */
}

/* 表格区域，设置为可滚动部分 */
.table-wrapper {
  /* flex-grow: 1; */
  overflow-y: auto;
  /* 启用垂直滚动 */
  -ms-overflow-style: none;
  /* 隐藏滚动条:IE 和 Edge 浏览器 */
  scrollbar-width: none;
  /* 隐藏滚动条:Firefox 浏览器 */
}

/* 隐藏滚动条（适用于 WebKit 浏览器） */
.table-wrapper::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}

/* 表头样式 */
thead {
  background-color: transparent;
  /* 半透明背景，避免内容与表头重叠 */
  background-image: url(../assets/img/module2/thead.png);
  /* 从浅绿色渐变到透明 */
  position: sticky;
  background-size: 100% 100%;
  top: 0%;
  z-index: 2;
  /* 确保表头位于表格内容之上 */
  /* backdrop-filter: blur(5px);  */
}

/* 表格样式 */
table {
  width: 80%;
  height: 60%;
  border-collapse: collapse;
  background-color: transparent;
  border-collapse: separate;
  /* 不合并单元格边框 */
  border-spacing: 0 3px;
  /* 为行设置 5px 的垂直间距 */
}

/* 表头单元格样式 */
th {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  border: none;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font: 14px;
}

/* 表格内容单元格样式 */
td {
  /* padding: 1px; */
  text-align: left;
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: normal;
  padding-left: 15px;
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 14px;
  max-height: 20px;
}

/* 表格行的背景色样式 */
.table-row {
  z-index: 1;
  transition: background-color 0.3s ease;
  background-image: url("../assets/img/module2/table.png");
  background-size: cover;
  max-height: 20px;
}

.table-row-selected {
  z-index: 1;
  background-image: url("../assets/img/module2/rowselect.png");
  transition: background-color 0.3s ease;
  background-size: cover;
}

/* 悬停行的背景色 */
.table-row:hover {
  background-image: linear-gradient(
    to right,
    rgb(127, 140, 222),
    rgba(255, 255, 255, 0)
  );
  background-color: rgba(58, 58, 58, 0.5);
}

.table-location {
  position: absolute;
  top: 45px;
  left: 0%;
  width: 100%;
  height: 100%;
  /* 绝对定位，位于特定位置，占满宽度和高度 */
}

.table-expand-button {
  position: absolute;
  background-image: url(../assets/img/module2/zhankai.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}

.table-retract-button {
  position: absolute;
  background-image: url(../assets/img/module2/shouqi.png);
  background-size: 100% 100%;
  /* top: 39vh; */
  left: 37.5%;
  background-color: transparent;
  width: 25px;
  height: 25px;
  border: none;
  cursor: pointer;
}
</style>